<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .da{
            width: 1000px;
            height: 500px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
        hr{
            color: #dbdcdd;
        }
        span{
            width: 80px;
            height: 30px;
            color: #fff;
            background-color: blue;
            margin-left: 5px;
            margin-right: 5px;
        }
        th,td{
            width: 150px;
            border: 1px solid blue;
        }
        thead th:nth-child(3){
            width: 250px;
        }
    </style>
</head>
<body>
    <div class="da">
        <hr>
        <h3>KKY点餐系统</h3>
        菜名：<input type="text" class="cm"><br>
        价格：<input type="text" class="jg"><br>
        份数：<input type="text" class="fs"><br>
        验证码：<input type="text" class="yzmk"><span class="yzm">01DK</span> <button onclick="yzman()">刷新验证码</button><br>
        <button onclick="add()">添加</button><br>
        <select>
            <option value=""></option>
            <option value="321">321</option>
            <option value="132">132</option>
            <option value="231">231</option>
        </select>
        <table>
            <thead>
                <tr>
                    <th>全选/全不选<input type="checkbox" class="qx" onclick=qxx()></th>
                    <th>序号</th>
                    <th>添加时间</th>
                    <th>菜名</th>
                    <th>价格</th>
                    <th>份数</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            
            </tbody>
            <tfoot>
                <tr>
                    <th>选中删除</th>
                    <th colspan="4">全部总计</th>
                    <th colspan="3" class="zj">111</th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
<script>
    var cm=document.querySelector('.cm')
    var jg=document.querySelector('.jg')
    var fs=document.querySelector('.fs')
    var yzmm=document.querySelector('.yzm')
    var tb=document.querySelector('tbody')
    var qx=document.querySelector('.qx')
    var zj=document.querySelector('.zj')
    var xl=document.querySelector('select')
    var xh=1
    yzmm.innerHTML=yzm()
    
    var op=document.querySelectorAll('option')
        for(i=0;i<op.length;i++){
            op[i].onclick=function(){
            alert(this.value)
        }
        }


    function set(arr){
        localStorage.setItem('data',JSON.stringify(arr))
    }
    function get(arr){
        var data=localStorage.getItem('data')
        if(data!=null){
            return JSON.parse(data)
        }else{
            return []
        }
    }
    function yzm(){
        var yzm=''
        var a='1234567890qwertyuiopasdfghjklzxcvbnm'
        for(i=0;i<4;i++){
            var index=Math.floor(Math.random()*(a.length))
            yzm+=a[index]
        }
        return yzm
    }
    function yzman(){
        yzmm.innerHTML=yzm()
    }
    function add(){
        var data=get()
        data.push({
            date:date(),
            cm:cm.value,
            jg:jg.value,
            fs:fs.value,
        })
        set(data)
        xr()
    }
    function xr(){
        tb.innerHTML=''
        var data=get()
        var sum=0
        for(i=0;i<data.length;i++){
            var tr=document.createElement('tr')
            tr.innerHTML=`
                <td><input type="checkbox" class='fxk' onclick='fx()'></td>
                <td>${i+1}</td>
                <td>${data[i].date}</td>
                <td>${data[i].cm}</td>
                <td>${(data[i].jg/1).toFixed(2)}</td>
                <td>${data[i].fs}</td>
                <td>${(data[i].jg*data[i].fs).toFixed(2)}</td>
                <td onclick='sc(${i})'>删除</td>
            `;
            tb.appendChild(tr)
            sum+=data[i].jg*data[i].fs
        }
        zj.innerHTML=sum.toFixed(2)+'元'
    }
    xr()
    function date(){
        var date=new Date()
        var n=date.getFullYear()
        var y=date.getMonth()+1
        var r=date.getDate()
        var sfm=date.toLocaleString().split(' ')[1]
        return`${n}.${y}.${r} ${sfm} `
    }
    function sc(i){
        var data=get()
        data.splice(i,1)
        set(data)
        xr()
    }
    function qxx(){
        var fxk=document.querySelectorAll('.fxk')
        for(i=0;i<fxk.length;i++){
            fxk[i].checked=qx.checked
        }
    }
    function fx(){
        var fxk=document.querySelectorAll('.fxk')
        for(i=0;i<fxk.length;i++){
            fxk[i].onclick=function(){
                var a=document.querySelectorAll('.fxk:checked')
                if(a.length==fxk.length){
                    qx.checked=true
                }else{
                    qx.checked=false
                }
            }
        }
    }
</script>